본문으로 건너뛰기

public과 src 폴더 차이

작성일 : 2025.01.21

Vue 프로젝트를 개발하다 보면 public 폴더와 src 폴더를 자주 사용하게 됩니다. 이 두 폴더는 빌드 과정에서 매우 다르게 처리되는데, 오늘은 이러한 차이점과 그 이유에 대해 자세히 알아보겠습니다.

public 폴더: 암호화와 압축이 필요 없는 정적 자산​

public 폴더의 특징​

public 폴더는 정적 자산(static assets)을 저장하는 공간입니다. 이미지, 폰트 파일, favicon 등이 여기에 포함됩니다. 이 폴더 내의 파일들은 빌드 과정에서 특별한 처리 없이 그대로 배포 디렉토리로 복사됩니다.

암호화/압축을 하지 않는 이유​

  1. 직접 접근성 보장

    • 웹 서버를 통해 직접 접근이 가능해야 합니다.
    • 파일이 암호화되면 브라우저에서 직접 사용할 수 없게 됩니다.

  2. 정적 자산의 특성

    • 이미 최적화된 형태로 제공되는 경우가 많습니다.
    • 브라우저에서 직접 참조되므로 별도의 처리가 불필요합니다.

  3. 효율적인 캐싱

    • 브라우저의 캐싱 메커니즘을 그대로 활용할 수 있습니다.
    • 정적 파일의 경우 캐싱이 매우 중요한 최적화 전략입니다.

src 폴더: 압축과 최적화가 필수적인 소스 코드​

src 폴더의 특징​

src 폴더는 애플리케이션의 핵심 소스 코드가 위치하는 곳입니다. Vue 컴포넌트, JavaScript 모듈, 스타일시트 등이 이 폴더에 포함됩니다.

압축이 필요한 이유​

  1. 파일 크기 최적화

    • 소스 코드 압축으로 번들 파일의 크기를 대폭 감소시킵니다.
    • 네트워크 전송 속도가 향상되어 페이지 로딩 시간이 단축됩니다.

  2. 보안 강화

    • 코드 난독화를 통해 소스 코드를 보호합니다.
    • 악의적인 사용자의 코드 분석을 어렵게 만듭니다.

  3. 모듈 번들링 최적화

    • 여러 모듈을 하나의 파일로 효율적으로 번들링합니다.
    • 코드 스플리팅을 통한 추가적인 최적화가 가능합니다.

  4. 브라우저 캐싱 효율성

    • 압축된 작은 크기의 파일로 브라우저 캐시를 효율적으로 사용합니다.
    • 재방문 시 더 빠른 로딩이 가능합니다.

실제 개발에서의 적용​

public 폴더 활용​

public/
  ├── favicon.ico
  ├── index.html
  ├── images/
  │   └── logo.png
  └── fonts/
      └── custom-font.woff
  • 정적 파일들은 그대로 배포됩니다.
  • URL을 통해 직접 접근이 가능합니다.

src 폴더 활용​

src/
  ├── components/
  ├── views/
  ├── store/
  ├── router/
  └── assets/
  • 빌드 시 최적화되어 dist 폴더에 생성됩니다.
  • 코드는 압축되고 난독화됩니다.

결론​

Vue 프로젝트에서 public 폴더와 src 폴더는 각각의 목적에 맞게 다르게 처리됩니다. public 폴더는 직접 접근이 필요한 정적 자산을 위해 그대로 유지되며, src 폴더는 최적화된 사용자 경험을 위해 압축과 난독화 과정을 거칩니다. 이러한 차이점을 이해하고 적절히 활용하면 더 효율적인 Vue 애플리케이션을 개발할 수 있습니다.